﻿<style>
    .displayborder:hover {
        border: solid 1px black;
    }

    .displayborder {
        border: solid 1px black;
    }

    .higlightOnHoover:hover {
        -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px inset, rgba(102, 175, 233, 0.6) 0 0 8px;
        border-color: #66AFE9;
        box-shadow: rgba(0, 0, 0, 0.0745098) 0 1px 1px inset, rgba(102, 175, 233, 0.6) 0 0 8px;
        outline: 0;
    }
</style>
<div ng-controller="invoiceTemplateCreator ">
    <!--SIDE MENU-->
    <div class="hidden-print" style="float: left; left: inherit; margin-left: -60px; position: fixed; top: 120px;text-align:center;">
        <div class="list-group">
            <button style="width:54px" ng-click="open()"  class="btn btn-info"><i class="fa fa-file-image-o"></i><br /> <span>logo</span></button>
            <div class="clear"> </div>
            <button style="width:54px" ng-click="openCompanyInfo()" class="btn btn-danger"><span class="fa fa-briefcase"></span><br /> <span>info</span></button>
            <div class="clear"></div>
            <button style="width:54px" ng-click="editColumName()" class="btn btn-warning"><i class="fa fa-cog"></i><br /> <span>table</span></button>
            <div class="clear"></div>
            <button style="width:54px" class="btn btn-success" type="button"><span class="glyphicon glyphicon-floppy-save"></span> <br /> <span>save</span></button>
            <div class="clear"></div>
        </div>
    </div>

    <!--INVOICE-->

    <div class="col-md-8 column " style="margin-bottom:100px;">
        <form class="form-horizontal " role="form">
            <div class="container">
                <div class="row clearfix">
                    <div class="col-md-8 column">
                        <div class="row clearfix">
                            <div class="row">
                                <div class="col-md-12 column">
                                    <div class="row clearfix">
                                        <div class="col-md-6 column">
                                            <!--Icon and Backgroud selection -->
                                            <span ng-click="open()"   ng-show="clipArt" style="cursor:pointer">
                                                <span style="font-size: 100px;" class=" fa-stack fa-lg higlightonhoover" tooltip-popup-delay='1000' tooltip-placement="right" tooltip="Create or upload your logo">
                                                    <i class="fa {{imageBackGround}}  {{ImageBgLogoSize.size}} {{backgroundRotation.rotation}}" ng-style="imagebackgroundColor"></i>
                                                    <i class="fa {{selected}} {{ImageLogoSize.size}} {{logoRotation.rotation}} " ng-style="clipArtColor"></i>
                                                </span>
                                            </span>
                                            <img ng-click="open()" class="higlightOnHoover"  
                                                 style="border: 0px; background: transparent;cursor:pointer;"
                                                 ng-show="image" ng-src="{{imageSrc}}"
                                                 tooltip-popup-delay='500' 
                                                 tooltip-placement="right" 
                                                 tooltip="Create or upload your logo"
                                                 width="140" class="img-thumbnail">
                                        </div>
                                        <div class="col-md-6 column">
                                            <div style="align-content:center">
                                                <div style="float : right">Invoice Number#: 123456</div><br />
                                                <div style="float : right">Purchase order#: 654321</div><br />
                                                <div style="float : right">Date : 10/26/2015</div><br />                                              
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <div class="row clearfix">
                                        <div class="col-md-6 column higlightOnHoover" 
                                             style="cursor:pointer;"
                                             tooltip-popup-delay='500'
                                             tooltip-placement="bottom"
                                             tooltip="Edit Company Information">
                                            <div style="float:left;">{{companyInfo[0].companyName}}</div><br />
                                            <div style="float:left;">{{companyInfo[1].companyAddress}},</div><br />
                                            <div style="float:left;">{{companyInfo[2].stateZipCode}},</div><br />
                                            <div style="float:left;">{{companyInfo[3].telephone}},</div><br />
                                            <div style="float:left;">{{companyInfo[4].website}},</div>
                                        </div>
                                        <div class="col-md-6 column ">                                        
                                            <div style="float:left;">
                                                CLIENT: John Doe
                                            </div><br />
                                            <div style="float:left;">
                                                ADDRESS: 796 Silver Harbour, TX 79273, US
                                            </div><br />
                                            <div style="float:left;">
                                                EMAI:L john@example.com
                                            </div><br />
                                            <div style="float:left;">
                                                PHONE: 305 748 7895
                                            </div><br />
                                            <div style="float:left;">
                                                DUE DATE: September 17, 2015
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <!--TABLE ITEMS CONTAINER-->
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <table      ng-table="tableParams"
                                                   class="table table-striped table-bordered table-hover table-condensed"
                                                   tooltip="Edit headers"
                                                   tooltip-animation="true"
                                                   tooltip-placement="top"
                                                   tooltip-popup-delay='500'
                                                   ng-controller="tablePurchasedItemController">
                                        <tr >
                                            <th class="higlightOnHoover"  ng-repeat="header in headersData" style="cursor:pointer;" ng-click="editColumName()">
                                                {{header.columnName}}
                                            </th>                                                                                      
                                        </tr>
                                        <tr ng-repeat="user in $data">
                                            <td >                                           
                                                {{user.index}}
                                            </td>
                                            <td >
                                                {{user.description}}
                                            </td>
                                            <td>
                                                {{user.pricePerUnit  | currency}}                                             
                                            </td>
                                            <td >
                                                {{user.qtyUnits}}
                                            </td>
                                            <td >
                                                {{user.qtyUnits * user.pricePerUnit | currency}}
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="row clearfix">
                                <div class="col-md-12 column">
                                    <div class="row clearfix">
                                        <div class="col-md-4 column">
                                        </div>
                                        <div class="col-md-4 column">
                                        </div>
                                        <div class="col-md-4 column">
                                            <div style="float:right"> Subtotal: ____________________</div>
                                            <div class="higlightOnHoover" style="float:right;cursor:pointer;"> Tax 8% :  ____________________</div>
                                            <div style="float:right"> Total     :  ____________________</div><br />
                                            <hr /><br /><br />
                                            <div style="float:right">  ____________________x</div>
                                            <div style="float:right">  signature and name</div>
                                        </div>
                                    </div>
                                </div>
                                <hr />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

